<template>
    <ul class="article-list">
        <template v-for="item in list">
            <li :key="item.id" class="article-item">
                <div class="word-area">
                    <div class="article-title" @click="goToDetail(item.id)">{{ item.title }}</div>
                    <div class="article-brief">{{ item.brief }}</div>
                    <ul class="btn-area">
                        <li class="can-click" @click="goToAuthor(item.author_id)">{{ item.author }}</li>
                        <li class="can-click" @click="goToDetail(item.id)"><i class="iconfont icon-comment"></i>{{ item.comment || 0 }}</li>
                        <li><i class="iconfont icon-like"></i>{{ item.like || 0 }}</li>
                    </ul>
                </div>
                <div class="img-area" @click="goToDetail(item.id)" v-if="item.main_img">
                    <img :src="item.main_img" />
                </div>
            </li>
        </template>
    </ul>
</template>
<script>
export default {
  name: 'u-list',
  props: {
    list: {
      required: true
    }
  },
  methods: {
    goToDetail (id) {
      this.$router.push({
        path: `/article/detail/${id}`
      })
    },
    goToAuthor (authorId) {
      this.$router.push({
        path: `/article/detail/${authorId}`
      })
    }
  }
}
</script>
<style scoped>
.article-list > li {
    width: 100%;
    margin: 0 0 15px;
    padding: 15px 2px 20px 0;
    border-bottom: 1px solid #f0f0f0;
    line-height: 20px;
    display: table;
}
.article-list > li > .img-area {
    width: 150px;
    height: 100px;
    text-align: center;
    right: 0;
    display: table-cell;
    vertical-align: middle;
    border-radius: 15px;
    cursor: pointer;
}
.article-list > li > .img-area > img {
    height: 100%;
    border-radius: 15px;
}
.article-list > li > .word-area {
    display: table-cell;
    padding-right: 20px;
    vertical-align: middle;
}
.word-area > .article-title {
    margin: -7px 0 4px;
    display: inherit;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    cursor: pointer;
}
.word-area > .article-title:hover {
    text-decoration: underline;
}
.word-area > .article-brief {
    margin: 8px 0;
    font-size: 13px;
    line-height: 24px;
    color: #999;
}
.word-area .btn-area {
    color: #b4b4b4;
    font-size: 12px;
    line-height: 14px;
    cursor: pointer;
}
.word-area .btn-area .iconfont {
    font-size: 14px;
    margin-right: 2px;
}
.word-area .btn-area > li {
    float: left;
    margin-right: 10px;
}
.word-area .btn-area > li.can-click:hover {
    color: #333;
}
.word-area .btn-area > li.can-click:hover, .word-area .btn-area > li.can-click {
    transition: .1s ease in;
    -webkit-transition: .1s ease in;
    -moz-transition: .1s ease in;
    -o-transition: .1s ease in;
    -ms-transition: .1s ease in;
}
</style>
